<template>
  <!-- 魔方设置组件 -->
  <div class="cubeV3Set">
    <div class="deco-control-group">
      <div class="container">
        <div class="header">魔方布局</div>
        <div class="tips">
          {{
            (value.show_method==1||value.show_method==2||value.show_method==3)?'选定布局区域，在下方添加图片，建议添加比例一致的图片':
              (value.show_method==8)?'移动鼠标选定布局区域大小':
                '选定布局区域，在下方添加图片'
          }}
        </div>
        <div class="deco-control-group__content">
          <div class="decorate-cube">
            <template v-for="(item,idx) in value.sub_entry">
              <ul class="cube-row" :key="idx">
                <li class="cube-item"
                    :class="{'item-selected':selModeArea===idx}"
                    :style="{
                      'width': 325/value.layout_width+'px', 
                      'height': 325/value.layout_height+'px'
                    }"></li>

                <!-- 一左三右 -->
                <li class="cube-item"
                    v-if="value.show_method==7"
                    :class="{'item-selected':selModeArea===idx}"
                    :style="{
                      'width': 325/value.layout_width+'px', 
                      'height': 325/value.layout_height+'px'
                    }"></li>
              </ul>
            </template>
            <template v-for="(item,idx) in value.sub_entry">
              <div class="cube-selected"
                   :key="'info-'+idx"
                   :class="{'cube-selected-click':selModeArea==idx}"
                   @click="selModeAreaClk(idx)"
                   :style="{
                     'width': 325/item.width+'px',
                     'height': 325/item.height+'px',
                     'top': (325/value.layout_width)*item.y+'px',
                     'left': (325/value.layout_height)*item.x+'px'
                    }">
                <img v-if="item.image_url" 
                      :src="item.image_url" 
                      alt="cubeImage" 
                      :width="325/item.width+'px'" 
                      :height="325/item.height+'px'">
                <div class="cube-selected-text" v-else>                
                  <template>
                    <div v-if="value.show_method==1||value.show_method==2||value.show_method==3">宽度{{Math.ceil(750/item.width)}}像素</div>
                    <div v-else-if="value.show_method==8">+</div>
                    <div v-else>
                      {{Math.ceil(750/item.width)}}x{{Math.ceil(750/item.height)}}像素<br/>或同等比例
                    </div>
                  </template>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="deco-help-desc--error">请添加图片</div>
    </div>

    <div class="add-img-area">
      <div class="subentry-item">
        <div class="item-wrap" @click="addImgBtn">
          <div v-if="value.sub_entry[selModeArea].image_url"
               class="small-img-thumb">
            <img :src="value.sub_entry[selModeArea].image_url" alt="cubeImage">
            <div class="tip-info">更换图片</div>
          </div>
          <div class="add-img-btn" v-else>
            <i class="el-icon-plus deco-editor-card-add-icon"></i>
            <p>添加图片</p>
          </div>
        </div>
        <div class="link-area">
          <span class="label">链接</span>
          <el-cascader
            size="small"
            style="width:180px"
            v-model="linkVal"
            placeholder="选择跳转到的页面"
            :options="linkOptions"
            :props="{ expandTrigger: 'hover' }"
            @change="handleChange"></el-cascader>
          <p style="margin-top:10px;color:#666;font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:240px"
             v-if="linkVal.indexOf('/goods')>-1">{{value.sub_entry[selModeArea].link_type=='goods'?'商品':'分组'}}：
             {{value.sub_entry[this.selModeArea].link_title||'-'}}
          </p>
        </div>
      </div>
    </div>

    <div class="deco-control-group sel-mode">
      <div class="container">
        <div class="tips">选择模板 <span>{{getModeName}}</span></div>
        <div class="mode-box">
          <el-radio-group v-model="value.show_method" 
                          @change="changeMode"
                          size="medium">
            <el-tooltip :content="item.name" 
                        placement="top" 
                        v-for="(item,idx) in modeObj"
                        :key="idx"
                        effect="light">
              <el-radio-button :label="item.id">              
                <i class="el-icon-s-grid"></i>
              </el-radio-button>
            </el-tooltip>
          </el-radio-group>
        </div>
      </div>
    </div>

    <div class="deco-control-group sel-mode">
      <div class="block">
        <span class="demonstration">图片间隙</span>
        <el-slider v-model="value.border_width" :max='30'></el-slider>
        <el-input-number v-model="value.border_width" 
                         :max="30"
                         :controls="false"
                         style="width:60px"
                         size="small"></el-input-number>
      </div>
    </div>

    <div class="deco-control-group sel-mode">
      <div class="block">
        <span class="demonstration">页面间距</span>
        <el-slider v-model="value.page_margin" :max='30'></el-slider>
        <el-input-number v-model="value.page_margin" 
                         :max="30"
                         :controls="false"
                         style="width:60px"
                         size="small"></el-input-number>
      </div>
    </div>

    <!-- 图片上传弹窗 b -->
    <!-- <add-img :isShowImgDialog='isShowImgDialog'
             @closeDialog='closeImgDialog'
             @saveImgBtn='saveImgBtn'></add-img> -->
    <!-- 图片上传弹窗 e -->

    <!-- 商品及分组弹窗 b -->
    <el-dialog
      custom-class="pros-dialog"
      title=""
      :close-on-click-modal="false"
      :modal-append-to-body="true"
      :append-to-body='true'
      :visible.sync="isShowProDialog"
      center
    >
      <el-tabs v-model="proTabsActive">
        <el-tab-pane label="已上架商品" name="first">
          <el-row style="margin-bottom:20px;">
            <el-col :span="16" v-if="false">
              <el-button @click="newGoods">新建</el-button>
              <el-button @click="draftManage">草稿管理</el-button>
              <el-button @click="refresh">刷新</el-button>
            </el-col>
            <el-col :span="8">
              <el-input
                placeholder="请输入内容"
                v-model="goodsSearchKey"
                class="input-with-select"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="searchGoods"
                ></el-button>
              </el-input>
            </el-col>
          </el-row>
          <simple-table
            :tableCol="goodsCol"
            :border="false"
            :canSelect="false"
             maxHeight="350"
            :tableData="goodsData"
            ref="goodsTable"
          >
            <el-table-column label="标题" align="left" slot="title">
              <template slot-scope="scope">
                <div style="display:flex;align-items:center;">
                  <el-radio :label="scope.row.pictureUrl" v-model="selectGoodsRadio" style="width:0;color:transparent">.</el-radio>
                  <img
                    :src="scope.row.pictureUrl"
                    style="width: 50px;height: 50px;"
                  />
                  <a
                    style="color:#155bd4;text-decoration:none;margin-left:10px;"
                    :href="createUrl(scope.row)"
                    target="_blank"
                    >{{ scope.row.productName }}</a
                  >
                </div>
              </template>
            </el-table-column>
          </simple-table>
          <Paging
            ref="proPaging"
            :total="total"
            :pageSize="pageSize"
            :current-page='pageIndex'
            @page-change="pageChange"
          ></Paging>
        </el-tab-pane>
        <el-tab-pane label="商品分组" name="second">
          <el-row style="margin-bottom:20px;">
            <el-col :span="16" v-if="false">
              <el-button>管理分组</el-button>
              <el-button>刷新</el-button>
            </el-col>
            <el-col :span="8">
              <el-input
                placeholder="请输入内容"
                v-model="groupSearchKey"
                class="input-with-select"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="searchGroup"
                ></el-button>
              </el-input>
            </el-col>
          </el-row>
          <simple-table
            :tableCol="groupCol"
            :border="false"
            :canSelect="false"
             maxHeight="350"
            :tableData="groupData"
            ref="goodsTable"
          >
            <el-table-column label="分组名称" align="left" slot="name" width="200">
              <template slot-scope="scope">
                <div>
                  <el-radio :label="scope.row.id" v-model="selectGroupRadio">{{scope.row.name}}</el-radio>                  
                </div>
              </template>
            </el-table-column>
          </simple-table>
          <Paging
            ref="groupPaging"
            :total="groupTotal"
            :pageSize="groupPageSize"
            :current-page.sync="groupPageIndex"
            @page-change="groupPageChange"
          ></Paging>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveProBtn">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 商品及分组弹窗 e -->
  </div>
</template>

<script>
// import AddImg from 'src/components/AddImg/index.vue';
import SimpleTable from './simpleTable'
import Paging from './paging'

export default {
  props:['value'],
  components: { 
    // AddImg,
    SimpleTable,
    Paging,
  },
  computed:{
    // 获取模式名称
    getModeName(){
      let res='';
      this.modeObj.map(item=>{
        if(this.value.show_method==item.id){
          res=item.name
        }
      })
      return res
    }
  },
  data(){
    return{
      // 选中的链接地址
      linkVal:'',
      linkOptions:[
        {
          value: 'shangpin',
          label: '商品',
          children: [{
            label: '全部商品',
            value:'/allPros',
          },{
            label: '商品及分组',
            value:'/goods',
          },{
            label: '购物车',
            value:'/shoppingCart',
          }]
        },
      ],    
      // 模式集合
      modeObj:[
        {id:1,name:'一行俩个'},
        {id:2,name:'一行三个'},
        {id:3,name:'一行四个'},
        {id:4,name:'二左二右'},
        {id:5,name:'一左二右'},
        {id:6,name:'一上二下'},
        {id:7,name:'一左三右'},
        // {id:8,name:'自定义'},
      ],
      // 点击的区域
      selModeArea:0,
      // 添加图片弹窗
      isShowImgDialog:false,
      // 商品及分组弹窗
      isShowProDialog:false,
      proTabsActive:'first',
      goodsSearchKey:'',
      total: 0,
      pageSize: 10,
      pageIndex: 1,
      goodsCol: [
        { slot: 'title' },
        { prop: 'createTime', label: '创建时间', width: 200 }
      ],
      goodsData: [],
      // 选择的商品radio值
      selectGoodsRadio:'',
      // 选中的商品或分组行
      selectGoods:[],
      // 商品分组表
      groupTotal:0,
      groupPageSize:10, 
      groupPageIndex:1,  
      groupSearchKey:'', 
      // 选择的分组radio值
      selectGroupRadio:'',
      groupCol:[
        { slot: 'name' },
        { prop: 'proNumber', label: '商品数量' },
        { prop: 'createTime', label: '创建时间' },
      ],
      groupData:[]
    }
  },
  created(){
    this.searchGoods();
    this.searchGroup()
  },
  methods:{
    // 点击模板小项事件
    selModeAreaClk(idx){
      this.selModeArea=idx;
      let {link_url} = this.value.sub_entry[idx];
      if(link_url){
        if(Object.prototype.toString.call(link_url) != '[object Array]'){
          this.linkVal=["shangpin","/goods"];
        }else{
          this.linkVal=link_url;
        }
      }else{
        this.linkVal='';
      }
    },
    // 图片链接改变事件
    handleChange(value) {
      this.selectGoods='';
      this.selectGoodsRadio='';
      this.selectGroupRadio='';
      if(value[1]=='/goods'){ 
        this.value.sub_entry[this.selModeArea].link_id='';
        this.value.sub_entry[this.selModeArea].link_title='';
        this.value.sub_entry[this.selModeArea].link_url='';
        this.isShowProDialog=true;
      }else{
        this.value.sub_entry[this.selModeArea].link_id=value[0];
        this.value.sub_entry[this.selModeArea].link_title=value[0];
        this.value.sub_entry[this.selModeArea].link_url=value;
        this.value.sub_entry[this.selModeArea].link_type=value[1].replace('/','');
      }
    },
    // 添加图片点击事件
    addImgBtn(){
      this.isShowImgDialog=true;
    },
    // 关闭图片弹窗
    closeImgDialog(){
      this.isShowImgDialog = false;
    },
    // 图片弹窗保存按钮
    saveImgBtn(val){
      this.closeImgDialog();
      this.value.sub_entry[this.selModeArea].image_url=val;
    },
    // 模板改变事件
    changeMode(val){
      this.linkVal='';
      this.selModeArea=0;
      switch(val){
        // 一行俩个
        case 1:{
          this.value.layout_height=2;  
          this.value.layout_width=2;
          this.value.sub_entry= [];
          for (let i = 0; i < 2; i++) {
            this.value.sub_entry.push({
              image_url:'',
              link_id: '',
              link_title: '',
              link_url: '',
              title: '',
              width:2,  //框内提示宽
              height:2, ////框内提示高
              x: i,
              y: 0
            });
          }
          break;
        }
        // 一行三个
        case 2:{
          this.value.layout_height=3;
          this.value.layout_width=3;
          this.value.sub_entry= [];
          for (let i = 0; i < 3; i++) {
            this.value.sub_entry.push({
              image_url:'',
              link_id: '',
              link_title: '',
              link_url: '',
              title: '',
              width:3,
              height:3,
              x: i,
              y: 0
            });
          }
          break;
        }
        // 一行四个
        case 3:{
          this.value.layout_height=4;
          this.value.layout_width=4;
          this.value.sub_entry= [];
          for (let i = 0; i < 4; i++) {
            this.value.sub_entry.push({
              image_url:'',
              link_id: '',
              link_title: '',
              link_url: '',
              title: '',
              width:4,
              height:4,
              x: i,
              y: 0
            });
          }
          break;
        }
        // 二左二右
        case 4:{
          this.value.layout_height=2;
          this.value.layout_width=2;
          this.value.sub_entry= [];
          for (let i = 0; i < 4; i++) {
            this.value.sub_entry.push({
              image_url:'',
              link_id: '',
              link_title: '',
              link_url: '',
              title: '',
              width:2,
              height:2,
              x: i<2?i:(i-2),
              y: i<2?0:1
            });
          }
          break;
        }
        // 一左二右
        case 5:{
          this.value.layout_height=2;
          this.value.layout_width=2;
          this.value.sub_entry= [];
          for (let i = 0; i < 3; i++) {
            this.value.sub_entry.push({
              image_url:'',
              link_id: '',
              link_title: '',
              link_url: '',
              title: '',
              width:2,
              height:i==0?1:2,
              x: i==0?0:1,
              y: i==0?0:i-1
            });
          }
          break;
        }
        // 一上二下
        case 6:{
          this.value.layout_height=2;
          this.value.layout_width=2;
          this.value.sub_entry= [];
          for (let i = 0; i < 3; i++) {
            this.value.sub_entry.push({
              image_url:'',
              link_id: '',
              link_title: '',
              link_url: '',
              title: '',
              width:i==0?1:2,
              height:2,
              x: i==0?0:i-1,
              y: i==0?0:1
            });
          }
          break;
        }
        // 一左三右
        case 7:{
          this.value.layout_height=2;
          this.value.layout_width=4;
          this.value.sub_entry= [];
       
          for (let i = 0; i < 4; i++) {
            let obj={}
            if(i==0){
              obj={
                width:2,
                height:1,
                x: 0,
                y: 0
              }
            }
            else if(i==1){
              obj={
                width:2,
                height:2,
                x: 1,
                y: 0
              }
            }else {
              obj={
                width:4,
                height:2,
                x: i/2,
                y: 2
              };
            }
            this.value.sub_entry.push({
              image_url:'',
              link_id: '',
              link_title: '',
              link_url: '',
              title: '',
              ...obj
            });
          }
          break;
        }
        default:break;
      }
    },
    // 产品及分组弹窗
    createUrl(item) {
      return '' + item.number
    },
    // 新建
    newGoods(){},
    // 草稿管理
    draftManage(){},
    // 刷新
    refresh(){
      this.netGetGoods()
    },
    pageChange(page) {
      this.pageIndex = page
      this.netGetGoods()
    },
    netGetGoods() {
      // const data = {
      //   Name: this.goodsSearchKey,
      //   ShopNumber: JSON.parse(sessionStorage.getItem('user')).shopNumber,
      //   Status: 2,
      //   Paging: {
      //     PageSize: this.pageSize,
      //     PageIndex: this.pageIndex
      //   }
      // }
      // this.http({
      //   url: this.api.GoodsApi.GetGoodsList,
      //   method: 'post',
      //   data
      // }).then(res => {
      //   if (res) {
      //     if (res.paging) {
      //       this.total = res.paging.Go_RowsCount
      //     }
      //     this.goodsData = res.data
      //   }
      // })
    },
    searchGoods() {
      this.pageIndex = 1;
      if(this.$refs.proPaging){
        this.$refs.proPaging.currentPage=1
      }
      this.netGetGoods()
    },
    // 分组表
    groupPageChange(page){
      this.groupPageIndex = page
      this.netGetGroup()
    },
    netGetGroup() {
      // let data={
      //   Name: this.groupSearchKey,
      //   ShopNumber: JSON.parse(sessionStorage.getItem('user')).shopNumber,
      //   Paging: {
      //     PageSize: this.groupPageSize,
      //     PageIndex: this.groupPageIndex
      //   }
      // };
      // this.http({
      //   url: this.api.ProductApi.QueryGroupList,
      //   method: 'post',
      //   data
      // })
      // .then(res => {      
      //   if (res.paging) {
      //     this.groupTotal = res.paging.Go_RowsCount;
      //     this.groupData = res.data;
      //   } else {
      //     this.$message.error(res.message || '网络请求异常')
      //   }
      // })
      // .catch(err => {
      //   this.$message.error('网络请求异常')
      // })  
    },
    searchGroup() {
      this.groupPageIndex = 1;
      if(this.$refs.groupPaging){
        this.$refs.groupPaging.currentPage=1
      }
      this.netGetGroup()
    },
    // 确定选择
    saveProBtn(){
      this.selectGoods=[]
      this.value.sub_entry[this.selModeArea].link_id=this.proTabsActive;
      // 商品
      if(this.proTabsActive=='first'){
        this.goodsData.map(item=>{
          if(this.selectGoodsRadio==item.pictureUrl){
            this.selectGoods=item;
          }
        })
        
        this.value.sub_entry[this.selModeArea].link_type='goods';
        this.value.sub_entry[this.selModeArea].link_id=this.selectGoods.number;
        this.value.sub_entry[this.selModeArea].link_title=this.selectGoods.productName;
        this.value.sub_entry[this.selModeArea].link_url=this.selectGoods.pictureUrl;   
      }else{ //分组
        this.groupData.map(item=>{
          if(this.selectGroupRadio==item.id){
            this.selectGoods=item;
          }
        })
        this.value.sub_entry[this.selModeArea].link_type='groups';
        this.value.sub_entry[this.selModeArea].link_id=this.selectGoods.id;
        this.value.sub_entry[this.selModeArea].link_title=this.selectGoods.name;
        this.value.sub_entry[this.selModeArea].link_url=this.selectGoods.id;        
      }
      this.isShowProDialog=false;
     
    },
  }
}
</script>

<style lang='less'>

  // 滚动条样式调整
div::-webkit-scrollbar {
  width: 6px;
  height: 10px;
  /**/
}
div::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
div::-webkit-scrollbar-thumb {
  background: #eee;
  border-radius: 10px;
}
div::-webkit-scrollbar-thumb:hover {
  background: #333;
}
div::-webkit-scrollbar-corner {
  background: #179a16;
}
.cubeV3Set{
  .small-img-thumb{
    width:100%;height:100%;overflow:hidden;position:relative;
    img{
      width: 60px;
      height: 60px;
      object-fit: cover;
    }
    .tip-info{
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 100;
      width: 100%;
      background-color: rgba(0,0,0,.5);
      color:#fff;
    }
  }
  .deco-control-group{
    padding: 12px 16px;
    .container{
      .header{
        color: #d40000;
      }
      .tips{
        margin-top: 10px;
        color: #969799;
        font-size: 12px;
        span{
          font-size: 14px;
          font-weight: 500;
          color: #323233;
          line-height: 18px;
          margin-right: 16px;
        }
      }
    } 
    .deco-control-group__content{
      margin-top: 10px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .decorate-cube{
        position: relative;
        width: 325px;
        .cube-row{
          float: left;
          list-style: none;
          padding: 0;
          margin: 0;
        }
        .cube-item{
          background: #f8f8f8;
          border-left: 1px solid #e5e5e5;
          border-bottom: 1px solid #e5e5e5;
          cursor: pointer;
          text-align: center;
          box-sizing: border-box;
          &:first-child{
            border-top: 1px solid #e5e5e5;
          }
          &.item-selected{
            background: #e0edff;
            border-color: #155bd4;
          }
        }
        .cube-selected{
          position: absolute;
          background-color: #fff;
          border: 1px solid #ebedf0;
          text-align: center;
          color: #7d7e80;
          cursor: pointer;
          &.cube-selected-click{
            background: #e0edff;
            border: 1px solid #155bd4;
            color: #155bd4;
            z-index: 2;
            cursor: auto;
            cursor: pointer;
          }
          .cube-selected-text{
            font-size: 12px;
            width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            overflow: hidden;
          }
          img{
            height: inherit;
            vertical-align: baseline;
            object-fit: cover;
          }
        }
      }
    }
    .deco-help-desc--error{
      margin-top: 10px;
      color: #d40000;
    }
  }

  .add-img-area{
    margin: 10px;
    background-color: #f7f8fa;
    .subentry-item{
      display: flex;
      padding: 6px 0;
    }
    .item-wrap{
      margin: 6px 0 0 12px;
      position: relative;
      width: 60px;
      height: 60px;
      background-color: #fff;
      text-align: center;
      border: 1px solid #e5e5e5;
      font-size: 12px;
      color: #155bd4;
      cursor: pointer;
      i{
        margin-top: 10px;
        font-size: 18px;
        font-weight: bold;
      }
    }
    .link-area{
      padding: 6px 12px;
      .label{
        margin-right: 16px;
      }
    }
  }
  .sel-mode{
    .container{
      .tips{
        font-size: 14px;
        span{
          margin-left: 16px;
        }
      }
      .mode-box{
        margin-top: 10px;
      }
      .el-radio-button{
        &:first-child{
          .el-radio-button__inner{
            border-bottom-left-radius: 0;
          }
        }
        &:last-child{
          .el-radio-button__inner{
            border-top-right-radius: 0;
          }
        }
        &:nth-child(7){
          .el-radio-button__inner{
            border-left: 1px solid #ddd;
            border-bottom-left-radius: 5px;
          }
        }
      }
    }
  }
  .el-slider{
    width: 200px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
  }
}
// 商品及分组弹窗
.pros-dialog{
  .el-dialog__header{
    padding: 0;
  }
  .el-dialog__headerbtn{
    z-index: 999;
  }
  .el-dialog__body{
    height: 550px;
    padding-bottom: 0;
    overflow-y: auto;
  }
}


</style>